<template>
	<div class="centerclientuserinfo publiccrap" id="publiccrap">
		<a class="returnback" @click="goback()">
			<img :src="constant.imgUrl +'design/caseback.png'" alt="">
		</a>
		<div class="info firstinfo">
			<div class="usremessage">
				<img :src="prebookDetail.user_picture" alt="">
				<div class="person_mesage">
					<p class="name">{{ prebookDetail.name || '待确认'}}</p>
					<p class="label">昵称：{{ prebookDetail.nick_name == undefined?'暂无昵称':prebookDetail.nick_name}}</p>
					<p class="label" v-if="prebookDetail.mobile_phone">手机号：{{ prebookDetail.mobile_phone }}</p>
					<p class="label">来源：{{ prebookDetail.prebook_source }}</p>
				</div>
				<a class="addfollow" @click="addfollows">新增跟进</a>
			</div>
			<div class="rooms_mesage">
				<div class="rooms_left">
					<p><span class="label">面积：</span>
						{{ $util.isEmpty(prebookDetail.square)?'待确认': prebookDetail.square + '㎡' }}
					</p>
					<p><span class="label">小区：</span>{{ prebookDetail.xiaoqu || '待确认' }}</p>
					<p><span class="label">备注：</span>{{ prebookDetail.remark || '待确认' }}</p>
				</div>
				<div class="rooms_right">
					<p>
						<span class="label">户型：</span>
						{{ $util.isEmpty(prebookDetail.house_shi)?'待确认':
						`${prebookDetail.house_shi}房${prebookDetail.house_ting}厅${prebookDetail.house_yang}阳${prebookDetail.house_wei}卫${
						$util.isEmpty(prebookDetail.house_chu)?
						0:prebookDetail.house_chu}厨`|| '待确认' }}
					</p>
					<p><span class="label">状态：</span>{{ sysBookingStatus[prebookDetail.status] }}</p>
				</div>
			</div>
		</div>
		<div class="info customer">
			<div
				v-if="!$util.isEmpty(user_list)"
				class="customer_box">
				<div class="record_list" >
					<ul >
						<template v-if="!$util.isEmpty(user_list)">
							<li
								class="record_wrap"
								v-for="(item,index) in user_list"
								:key="index">
								<div class="record_top">
									<div class="record_type">{{ item.return_visit_remark }}</div>
								</div>
								<div class="record_bottom">
									<p>{{ item.return_visit_time_str }}</p>
								</div>
							</li>
						</template>
					</ul>
				</div>
			</div>
		</div>
		<footer class="pub_footer">
			<UserDetFooter :phone="phone"/>
		</footer>
		<uLiLoadMore :loadingType="loadingType" :contentText="contentText"></uLiLoadMore>
		<div class="record_add" v-if="recordAdd" @click="recordAddHide" >
			<div class="record_add_box" @click.stop>
				<div
					class="record_add_close"
					@click="recordAddHide"/>
				<p class="record_add_caption">添加跟进信息</p>
				<textarea
					class="record_add_textarea"
					placeholder="请输入新的跟进信息"
					v-model="recordAddValue"/>
				<button
					class="record_add_submit"
					@click="saveAddRecord">保存
				</button>
			</div>
		</div>
	</div>
</template>

<script>
import { list } from '@/mixins'
import { getfollow, addfollow } from '@/api/prebook'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import UserDetFooter from '@/pages/components/userDetFooter'
export default {
	name: 'followrecord',
	mixins: [list],
	components: {
		uniLoadMore,
		UserDetFooter
	},
	data() {
		return {
			constant: this.$constant,
			backstatus: true,
			scrollTop: 0,
			recordAdd: false,
			recordAddValue: '',
			user_list: [],
			user_loading: false,
			user_finished: false,
			userCurrentPage: 1,
			userinfo_data: '',
			end_time: '',
			mobile_phone: '',
			prebook_id: '',
			prebookDetail: '',
			phone: '',
			page: 1,
			timer: null,
			loadingText: '加载中...',
			loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.end_time = this.dateFormat(new Date())
		this.mobile_phone = this.$util.isEmpty(opcation.mobile) ? '' : opcation.mobile
		this.prebook_id = opcation.prebook_id
		this.isEmpty = opcation.isEmpty
		if (opcation.prebookDetail !== '') {
			this.prebookDetail = JSON.parse(opcation.prebookDetail)
		}
		if (opcation.isEmpty == 1) {
			this.recordAdd = true
		}
		this.phone = this.prebookDetail.mobile_phone
		this.init()
	},
	onPullDownRefresh() {
		this.getUserList()
		uni.showLoading({
			title: '数据已刷新'
		})
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		this.timer = setTimeout(function() {
			that.getpushmore()
		}, 1000)
	},
	mounted() {

	},
	methods: {
		goback() {
			uni.navigateBack({
				delta: 1
			})
		},
		init() {
			this.getUserList()
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		getUserList() {
			this.page = 1
			this.loadingType = 0
			uni.showNavigationBarLoading()
			if (this.mobile_phone !== '') {
				const params = {
					limit: 10,
					page: this.page,
					end_time: this.end_time,
					mobile: this.mobile_phone
				}
				getfollow(params).then(res => {
					if (res.status == 'success') {
						if (res.data.data.length !== 0) {
							let lists = res.data.data
							this.user_list = lists
							uni.stopPullDownRefresh()
							uni.hideNavigationBarLoading()
						}
					} else {
						this.msg(res.message)
					}
					uni.hideLoading()
				})
			}
			uni.hideLoading()
			uni.hideNavigationBarLoading()
		},
		getpushmore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			const params = {
				limit: 10,
				page: this.page,
				end_time: this.end_time,
				mobile: this.mobile_phone
			}
			getfollow(params).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.user_list = this.user_list.concat(lists)
						this.loadingType = 0
					}
					if (res.data.current_page == res.data.last_page) {
						this.loadingType = 2
					}
				} else {
					this.msg(res.message)
				}
				uni.hideLoading()
				uni.hideNavigationBarLoading()
			})
		},
		dateFormat(date) {
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hour = date.getHours()
			const min = date.getMinutes()
			const second = date.getSeconds()

			return `${year}-${month}-${day} ${hour}:${min}:${second}`
		},
		addfollows() {
			this.recordAdd = true
		},
		recordAddHide() {
			this.recordAdd = false
		},
		saveAddRecord() {
			const data = {
				prebook_id: this.prebook_id,
				return_visit_remark: this.recordAddValue
			}
			addfollow(data).then((res) => {
				if (res.status === 'success') {
					if (this.isEmpty == 1) {
						uni.navigateBack({
							delta: 1
						})
						return false
					}
					this.recordAdd = false
					this.getUserList(1)
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.publiccrap {
		background-color: #fff;
		.returnback {
			width: 60px;
			height: 60px;
			position: fixed;
			left: 5%;
			top: 54px;
			opacity: .7;
			float: left;
			z-index: 1;
		}
		.returnback img {
			width: 60px;
			height: 60px;
			float: left;
		}
		.record_list {
			margin-top: 40px;
			ul {
				border-left: 2px solid #ccc;
			}
			.record_wrap {
				padding-left: 30px;
				margin-bottom: 50px;
				.record_top {
					position: relative;
					top: -10px;
					display: flex;
					align-items: center;
					color: #666;
					.record_type {
						font-size: 30px;
					}
					& > div {
						margin-right: 20px;
					}
				}
				.record_top::before {
					position: absolute;
					left: -42px;
					content: '';
					display: inline-block;
					width: 16px;
					height: 16px;
					border: 4px solid #fff;
					border-radius: 50%;
					background-color: #ccc;
				}
				.record_bottom {
					/*background-color: #f5f5f5;*/
					border-radius: 16px;
					display: flex;
					font-size: 24px;
					color: #999999;
					align-items: center;
					.record_img {
						width: 168px;
						height: 130px;
						margin-right: 20px;
						img {
							width: 100%;
							height: 100%;
							border-top-left-radius: 16px;
							border-bottom-left-radius: 16px;
						}
					}
					.attr_img {
						width: 130px;
					}
					.record_bottom_main {
						color: #333;
						font-size: 30px;
						margin-bottom: 10px;
					}
				}
			}
			.record_wrap:nth-child(1) {
				.record_type {
					color: #ff6900;
				}
				.record_top::before {
					background-color: #ff9600;
				}
			}
		}
	}
	.centerclientuserinfo .info{
		width: 100%;
		float: left;
		margin-top: 20px;
		padding-left: 40px;
		background-color: #fff;
		box-sizing: border-box;
	}
	.centerclientuserinfo .label {
		color: #999;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.firstinfo{
		margin-top: 0;
	}
	.lipress{
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.addfollow{
		float: right;
		width: 170px;
		height: 60px;
		color: #3a1b04;
		margin-top: 15px;
		font-size:24px;
		line-height:60px;
		text-align:center;
		border-radius:30px;
		background: #ffd11a;
	}
	.usremessage{
		width: 96%;
		float: left;
		margin-right: 10px;
		margin-top: 20px;
		padding-bottom: 20px;
		border-bottom: 2px solid #cccccc;
	}
	.usremessage img{
		width: 120px;
		height: 120px;
		float: left;
		border-radius: 50%;
		margin-right: 10px;
	}
	.person_mesage{
		float: left;
		width: 54%;
		font-size: 24px;
		margin-left: 10px;
	}
	.person_mesage .name{
		font-size: 34px;
		margin-bottom: 15px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.rooms_mesage{
		width: 100%;
		float: left;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	.intention{
		float: right;
		width: 120px;
		height: 120px;
		text-align: center;
		line-height: 60px;
	}
	.intention_sh{
		width: 120px;
		height: 60px;
		font-size: 40px;
		color: #ff6900;
		background: #fff8dc;
		border-radius: 10px 10px 0 0;
	}
	.intention_sh span{
		font-size: 24px;
	}
	.intention_btom{
		width: 120px;
		height: 60px;
		color: #3a1b04;
		background: #ffd11a;
		border-radius: 0 0 10px 10px;
	}
	.rooms_left{
		float: left;
		width: 50%;
		line-height: 40px;
		p{
			line-height: 45px;
		}
	}
	.rooms_right{
		float: left;
		width: 50%;
		line-height: 40px;
		p{
			line-height: 45px;
		}
	}
	.customer{
		margin-top: 20px;
	}
	.customer_box{
		width: 90%;
		float: left;
		margin-left: 40px;
	}
	.subheading{
		margin-top: 20px;
		margin-bottom: 5px;
		font-size: 30px;
		font-weight: bold;
		/* margin-bottom: 20px;*/
	}
	.record_add {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
	}
	.record_add_box {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		padding-top: 40px;
		width: 670px;
		height: 450px;
		background-color: #fff;
		border-radius: 30px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.record_add_close {
		position: absolute;
		top: 40px;
		right: 40px;
		width: 30px;
		height: 30px;
		background: url($imgUrl+'center/icon_close.png') ;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
	.record_add_caption {
		margin-bottom: 50px;
		text-align: center;
		font-size: 34px;
		color: #333;
		line-height: 34px;
		font-weight: bold;
	}
	.record_add_textarea {
		display: block;
		margin: auto;
		margin-top: 40px;
		padding: 20px;
		width: 600px;
		height: 200px;
		box-sizing: border-box;
		resize: none;
		border:3px solid #ddd;
	}
	.record_add_submit {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100px;
		text-align: center;
		font-size: 28px;
		color:#ff9000;
		line-height: 100px;
		background-color: #fff;
		border: none;
		border-top:1px solid #ddd; /*no*/
		box-sizing: border-box;
	}
	#publiccrap .uni-popup__wrapper .uni-custom .uni-popup__wrapper-box{
		padding: 0;
	}
</style>
